<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.0.1/css/bootstrap.min.css">
    <title>医生主页预约</title>
    <style>
        body {
            background-color: #f0f2f5;
        }
        .card {
            border-radius: 10px;
            margin: 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .card-header {
            border-radius: 10px 10px 0 0;
            background-color: #007bff;
            color: #fff;
        }
        .form-label {
            font-weight: 500;
        }
        .form-input {
            padding: .375rem .75rem;
            line-height: 1.5;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: .3rem;
        }
        .form-text {
            font-size: 80%;
        }
        .btn-appointment {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-appointment:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-full {
            background-color: #ff5050;
            border-color: #ff5050;
        }
        .btn-full:hover {
            background-color: #e00000;
            border-color: #e00000;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">医生主页预约</h4>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <label for="input-name" class="col-sm-2 col-form-label form-label">医生姓名</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control form-input" id="input-name" value="张医生" readonly>
                    </div>
                    <label for="input-title" class="col-sm-2 col-form-label form-label">职称</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control form-input" id="input-title" value="主治医师" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="input-expertise" class="col-sm-2 col-form-label form-label">擅长</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control form-input" id="input-expertise" value="肝胆疾病" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="input-intro" class="col-sm-2 col-form-label form-label">介绍</label>
                    <div class="col-sm-10">
                        <textarea class="form-control form-input" id="input-intro" rows="3" readonly>擅长各种肝胆疾病的诊治，从业多年，曾获省级科技进步奖。</textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <label class="col-sm-2 col-form-label form-label">排班信息</label>
                    <div class="col-sm-10">
                        <div class="row mb-2">
                            <div class="col-sm-2">
                                <span class="form-text">时间</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">星期</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">上/下午</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">科室</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">院区</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">余号/总号</span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-2">
                                <span class="form-text">2023-05-22</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">星期三</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">下午</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">消化内科门诊</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">A院区</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">2/4</span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-2">
                                <span class="form-text">2023-05-23</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">星期四</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">上午</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">消化内科门诊</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">B院区</span>
                            </div>
                            <div class="col-sm-2">
                                <span class="form-text">1/4</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="input-fee" class="col-sm-2 col-form-label form-label">诊费</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control form-input" id="input-fee" value="50元/次" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-6 offset-sm-2">
                        <button type="button" class="btn btn-appointment w-100">预约</button>
                        <button type="button" class="btn btn-full w-100 d-none">已满</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
    <script>
        var btnAppointment = document.querySelector('.btn-appointment');
        var btnFull = document.querySelector('.btn-full');
        var remain = 2; //余号

        btnAppointment.addEventListener('click', function () {
            if (remain > 0) {
                remain--;
                btnAppointment.textContent = '已预约 (' + remain + '/4)';
                if (remain === 0) {
                    btnAppointment.classList.add('d-none');
                    btnFull.classList.remove('d-none');
                }
            } else {
                alert('预约人数已满，不可预约');
            }
        });
    </script>
</body>
</html>